.patient-path {
  --patient-path-box-bg: #f5ffff;
  --patient-path-line-color: #b6e4e4;
  --patient-path-line-thickness: 2px;
  --patient-path-dot-size: 2px;
  --patient-path-dot-gap: 3px;
  --patient-path-connector-inset: 29px;
  --patient-path-outer-trim: 20px;
  --patient-path-step-icon-size: 80px;
  --patient-path-feature-icon-size: 100px;

  padding-top: 50px;
  padding-bottom: 50px;
}

.description-subtitle {
  line-height: 30px;
}

.patient-path__intro {
  margin: 0 auto 32px;
  padding-top: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.patient-path__intro p {
  color: #4e4e4e;
}

.patient-path__intro p:last-child {
  margin-bottom: 0;
}

.patient-path__box {
  padding: 32px 16.5px;
  border-radius: 32px;
  background-color: var(--patient-path-box-bg);
  overflow: hidden;
}

.patient-path__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.patient-path__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.patient-path__step:first-child {
  margin-left: calc(-1 * var(--patient-path-outer-trim));
}

.patient-path__step:last-child {
  margin-right: calc(-1 * var(--patient-path-outer-trim));
}

.patient-path__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(
    var(--patient-path-step-icon-size) / 2 - var(--patient-path-dot-size) / 2
  );
  left: calc(
    50% + var(--patient-path-step-icon-size) / 2 +
      var(--patient-path-connector-inset)
  );
  right: calc(
    -50% + var(--patient-path-step-icon-size) / 2 +
      var(--patient-path-connector-inset)
  );
  height: var(--patient-path-dot-size);
  background-image:
    radial-gradient(
      circle closest-side,
      var(--patient-path-line-color) 98%,
      transparent 100%
    ),
    radial-gradient(
      circle closest-side,
      var(--patient-path-line-color) 98%,
      transparent 100%
    ),
    linear-gradient(
      var(--patient-path-line-color),
      var(--patient-path-line-color)
    );
  background-repeat: no-repeat;
  background-size:
    var(--patient-path-dot-size) var(--patient-path-dot-size),
    var(--patient-path-dot-size) var(--patient-path-dot-size),
    calc(
        100% - 2 * (var(--patient-path-dot-size) + var(--patient-path-dot-gap))
      )
      var(--patient-path-line-thickness);
  background-position:
    left center,
    right center,
    center;
}

.patient-path__step-icon {
  flex: 0 0 auto;
}

.patient-path__step-icon img {
  display: block;
  width: var(--patient-path-step-icon-size);
  height: var(--patient-path-step-icon-size);
  object-fit: contain;
}

.patient-path__step-label {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #4e4e4e;
}

.patient-path__slogan {
  width: fit-content;
  max-width: 100%;
  margin: 50px auto 0;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #179b93;
  background: linear-gradient(135deg, #51afbf, #4e7e99);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.patient-path__description {
  margin-top: 50px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.patient-path__description p {
  color: #4e4e4e;
}

.patient-path__description p:last-child {
  margin-bottom: 0;
}

.patient-path__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 120px;
  row-gap: 48px;
  margin-top: 50px;
}

.patient-path__feature {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.patient-path__feature-icon {
  flex: 0 0 auto;
}

.patient-path__feature-icon img {
  display: block;
  width: var(--patient-path-feature-icon-size);
  height: var(--patient-path-feature-icon-size);
  object-fit: contain;
}

.patient-path__feature-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  color: #4e4e4e;
}

.patient-path__feature-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.patient-path__feature-text p {
  color: #4e4e4e;
}

.patient-path__feature-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .patient-path__features {
    grid-template-columns: 1fr;
  }

  .patient-path__box {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .patient-path__intro {
    margin-bottom: 24px;
  }

  .patient-path__box {
    padding: 32px 20px;
  }

  .patient-path__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .patient-path__step {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .patient-path__step:first-child,
  .patient-path__step:last-child {
    margin-left: 0;
    margin-right: 0;
  }

  .patient-path__step:not(:last-child)::after {
    top: 100%;
    left: calc(
      var(--patient-path-step-icon-size) / 2 - var(--patient-path-dot-size) / 2
    );
    right: auto;
    width: var(--patient-path-dot-size);
    height: 32px;
    background-size:
      var(--patient-path-dot-size) var(--patient-path-dot-size),
      var(--patient-path-dot-size) var(--patient-path-dot-size),
      var(--patient-path-line-thickness)
        calc(
          100% - 2 *
            (var(--patient-path-dot-size) + var(--patient-path-dot-gap))
        );
    background-position:
      center top,
      center bottom,
      center;
  }

  .patient-path__step-label {
    margin-top: 0;
  }

  .patient-path__slogan {
    margin-top: 32px;
    font-size: 19px;
  }

  .patient-path__description {
    margin-top: 32px;
  }

  .patient-path__feature {
    gap: 16px;
  }

  .patient-path__feature-title {
    font-size: 18px;
  }
}